<template>
    <div>
        <h1>文章列表</h1>
        <el-divider></el-divider>
        <div v-for="item in articleLists" :key="item.id" @click="go(item.id)">
            <article-list :articleData="item" />
        </div>
    </div>
</template>

<script>
import articleList from "@/components/articleList.vue";
import { getListById } from "@/api/article";
export default {
    async mounted() {
        this.articleLists = await getListById(this.$route.query.id);
    },
    watch: {
        async $route(to, from) {
            this.articleLists = await getListById(to.query.id);
        },
    },
    methods: {
        go(id) {
            this.$router.push({ name: "Article", query: { id } });
        },
    },
    name: "Home",
    components: {
        articleList,
    },
    data() {
        return {
            activeIndex: 1,
            articleLists: [
                {
                    id: 243,
                    title: "文章一",
                    articleInfo: "流水落花春去也",
                    createTIme: "2021-4-3 17:07",
                    readNum: 2021,
                    articleType: "洲言",
                },
                {
                    id: 1234,
                    title: "文章er",
                    articleInfo: "真的帅哈哈哈哈哈哈哈哈哈哈哈哈",
                    createTIme: "2021-4-3 17:07",
                    readNum: 2021,
                    articleType: "洲言",
                },
                {
                    id: 75,
                    title: "文章3",
                    articleInfo: "一枝红艳露凝香,云雨巫山枉断肠",
                    createTIme: "2021-4-3 17:07",
                    readNum: 2021,
                    articleType: "洲言",
                },
                {
                    id: 123,
                    title: "wenzhangsi4",
                    articleInfo: "大江东去浪淘尽，千古风流人物",
                    createTIme: "2021-4-3 17:07",
                    readNum: 2021,
                    articleType: "洲言",
                },
            ],
        };
    },
};
</script>

<style>
</style>